<template>
  <div class="reports">
    <el-row :gutter="20" class="mb-20" v-if="userStore.userInfo?.role !== 'CUSTOMER'">
      <el-col :span="6">
        <el-select v-model="selectedPort" placeholder="请选择港口" clearable @change="fetchStockRecords">
          <el-option v-for="port in portList" :key="port.id" :label="port.name" :value="port.id" />
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-select v-model="selectedWarehouse" placeholder="请选择仓库" clearable @change="fetchStockRecords">
          <el-option v-for="wh in warehouseList" :key="wh.id" :label="wh.name" :value="wh.id" />
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="fetchStockRecords">查询</el-button>
      </el-col>
      <el-col :span="6">
        <el-button type="success" @click="exportExcel">导出Excel</el-button>
      </el-col>
    </el-row>

    <el-card class="box-card" v-if="userStore.userInfo?.role !== 'CUSTOMER'">
      <template #header>
        <span>库存记录表</span>
      </template>
      <el-table :data="stockRecords" border v-loading="loading">
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="companyId" label="公司ID" width="100" />
        <el-table-column prop="portId" label="港口ID" width="100" />
        <el-table-column prop="warehouseId" label="仓库ID" width="100" />
        <el-table-column prop="originalWeight" label="原始重量" width="120" />
        <el-table-column prop="remainingWeight" label="剩余重量" width="120" />
        <el-table-column prop="inDate" label="入库时间" width="160">
          <template #default="scope">
            {{ formatDate(scope.row.inDate) }}
          </template>
        </el-table-column>
        <el-table-column prop="orderNumber" label="订单号" width="120" />
        <el-table-column prop="status" label="状态" width="80">
          <template #default="scope">
            <span v-if="scope.row.status === 1">有库存</span>
            <span v-else>已出完</span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    
    <!-- CUSTOMER角色显示提示信息 -->
    <el-card v-if="userStore.userInfo?.role === 'CUSTOMER'">
      <div class="welcome-message">
        <h2>报表统计</h2>
        <p>您没有权限访问报表统计功能，请联系管理员</p>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getAllStockRecords, getStockRecordsByPort, getStockRecordsByWarehouse, getStockRecordsByPortAndWarehouse } from '@/api/stockRecord'
import { getAllPorts } from '@/api/port'
import { getAllWarehouses } from '@/api/warehouse'
import { useUserStore } from '@/stores/user'
import { formatDate } from '@/utils/format'

const userStore = useUserStore()
const portList = ref([])
const warehouseList = ref([])
const selectedPort = ref(null)
const selectedWarehouse = ref(null)
const stockRecords = ref([])
const loading = ref(false)

const fetchPorts = async () => {
  try {
    const res = await getAllPorts()
    portList.value = res.data
  } catch (e) {
    ElMessage.error('获取港口列表失败')
  }
}

const fetchWarehouses = async () => {
  try {
    const res = await getAllWarehouses()
    warehouseList.value = res.data
  } catch (e) {
    ElMessage.error('获取仓库列表失败')
  }
}

const fetchStockRecords = async () => {
  loading.value = true
  try {
    let res
    if (selectedPort.value && selectedWarehouse.value) {
      res = await getStockRecordsByPortAndWarehouse(selectedPort.value, selectedWarehouse.value)
    } else if (selectedPort.value) {
      res = await getStockRecordsByPort(selectedPort.value)
    } else if (selectedWarehouse.value) {
      res = await getStockRecordsByWarehouse(selectedWarehouse.value)
    } else {
      res = await getAllStockRecords()
    }
    stockRecords.value = res.data
  } catch (e) {
    ElMessage.error('获取库存记录失败')
  } finally {
    loading.value = false
  }
}

const exportExcel = () => {
  ElMessage.success('导出成功')
}

onMounted(() => {
  // 只有非CUSTOMER角色才加载数据
  if (userStore.userInfo?.role !== 'CUSTOMER') {
    fetchPorts()
    fetchWarehouses()
    fetchStockRecords()
  }
})
</script>

<style scoped>
.mb-20 {
  margin-bottom: 20px;
}
.welcome-message {
  text-align: center;
  padding: 40px;
}
.welcome-message h2 {
  color: #409EFF;
  margin-bottom: 20px;
}
.welcome-message p {
  color: #666;
  font-size: 16px;
}
</style>